<template>
  <div class="right_index clearfix">
    <div class="content_scroll">
      <div class="clt-r_item">
        <ModuleTitle class="s_box" />
        <!-- 注册商户数 -->
        <div class="box s_box">
          <shopNum :qgData="qgData" />
        </div>
      </div>
      <!-- 注册店铺分类 -->
      <div class="clt-r_item">
        <ModuleTitle title="机构数量统计" class="s_box" />
        <div class="box s_box">
          <shopType :qgData="qgData" />
        </div>
      </div>

      <div class="clt-r_item">
        <ModuleTitle title="融资金额统计" class="s_box" />
        <div class="box s_box">
          <merchantsNum :qgData="qgData" />
        </div>
      </div>
      <div class="clt-r_item">
        <ModuleTitle title="收单服务优惠统计" class="s_box" />
        <div class="box s_box">
          <flowingWaterStatistics :qgData="qgData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ModuleTitle from '../../ModuleTitle/index'
import shopNum from './shop/shopNum.vue'
import shopType from './shop/shopType.vue'

import merchantsNum from './collectSingle/merchantsNum.vue'
import flowingWaterStatistics from './collectSingle/flowingWaterStatistics.vue'
export default {
  components: {
    shopNum,
    shopType,

    ModuleTitle,
    merchantsNum,
    flowingWaterStatistics,
  },
  props: ['qgData'],
  data() {
    return {
      // qgData: {},
    }
  },
  mounted() {
    // let that = this
    // console.log('1111=newOneRight=', this.qgData)
    this.$bus.on('qgData', name => {
      // console.log('name qgData==', name)
      // that.qgData = { ...name }
      // that.$forceUpdate();
      // console.log('that.qgData===', that.qgData['01'])
      // that.qgData.splice(that.qgData.length, 0)
    })
  },
}
</script>

<style lang="scss" scoped>
.right_index {
  position: absolute;
  top: 280px;
  right: 0px;
  /*width: 6246px - 1418px - 1760px;*/
  /*width: 3068px;*/
  width: 1000px;
  float: left;
  left: 1810px;
  height: 1600px;
  cursor: pointer;
  z-index: 999;
  .content_scroll {
    height: 1000px;
    width: 100%;
    cursor: pointer;
    .clt-r_item {
      width: 490px;
      height: 641px;
      float: left;
      margin-right: 10px;
      margin-bottom: 204px;
      .content_title {
        font-size: 28px !important;
      }
      .ri_title {
        height: 84px;
        line-height: 84px;
        margin-bottom: 50px;
      }
    }

    .pb {
      padding-bottom: 20px;
    }

    .box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .module_title {
      padding: 20px 0;
      font-size: 30px;
      line-height: 30px;
      color: #fff;
      margin-bottom: 50px;
    }
  }
}
</style>
